<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleDialogClose"
    :close-on-click-modal="false"
    class="subcribe-common-dialog small-common-dialog-size">
    <DialogTitle :title="isEdit ? '编辑分组' : '添加分组'" font-size="16px" style="margin-bottom:20px;"/>
    <el-form
      ref="groupNameForm"
      :model="groupInfo"
      :rules="rules"
      label-width="80px"
      class="group-name"
      label-position="right">
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="groupInfo.name" :maxlength="12" clearable size="small" class="width240" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <draggable
      v-if="isEdit"
      v-model="groupInfo.children"
      v-bind="dragOptions"
      group="process"
      handle=".draggable-item">
      <transition-group type="transition" class="draggable-item-list">
        <template v-for="item in groupInfo.children" >
          <div :key="item.id" class="draggable-item">
            <!--<img :src="draggableImg" class="draggable-img" alt="" >-->
            <span style="user-select: none">{{ item.name }}</span>
          </div>
        </template>
      </transition-group>
    </draggable>
    <div class="dialog-footer">
      <el-button :disabled="btnDisabled" class="ok" type="primary" @click="handleConfirm">确定</el-button>
      <el-button class="cancel-btn-style" type="info" @click="handleDialogClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DialogTitle from '@/components/Title';
import draggable from 'vuedraggable';
import draggableImg from '@/assets/orderlist/draggable.png';

export default {
  components: {
    DialogTitle,
    draggable
  },
  data() {
    return {
      draggableImg,
      dialogVisible: false,
      isEdit: false,
      groupInfo: {
        name: '',
        children: []
      }
    };
  },
  computed: {
    rules() {
      return {
        'name': [{ required: true, message: '请输入分组名称', trigger: 'blur' }]
      };
    },
    dragOptions() {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      };
    },
    btnDisabled() {
      const { name } = this.groupInfo;
      const str = name.replace(/\s+/g, '');
      return !str.replace(/[\r\n]/g, '');
    }
  },
  methods: {
    init(params) {
      this.dialogVisible = true;
      if (params) {
        this.groupInfo = _.cloneDeep(params);
        this.isEdit = true;
      } else {
        this.groupInfo.name = '';
        this.isEdit = false;
      }
    },
    handleDialogClose() {
      this.dialogVisible = false;
      this.groupInfo.children = [];
      this.$refs['groupNameForm'].resetFields();
      this.$emit('closeCallback');
    },
    handleConfirm() {
      const emitName = this.isEdit ? 'groupEdit' : 'groupAdd';
      this.$emit(emitName, this.groupInfo);
    }
  }
};
</script>

<style lang="scss" scoped>
.group-name {
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }
}
.draggable-item-list {
  max-height: 60vh;
  overflow-y: auto;
  display: block;
  border-top: 2px solid #EBEEFD;
  .draggable-item {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EBEEFD;
    height: 48px;
    background-color: #fff;
    overflow: hidden;
    cursor: move;
    .draggable-img {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }
    &:hover {
      background-color: #f5f7fa;
    }
  }
}
.dialog-footer {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  .ok {
    width: 120px;
    font-size: 16px;
    padding: 8px 20px;
  }
  .cancel-btn-style {
    font-size: 14px;
    padding: 8px 20px;
    margin-left: 16px !important;
  }
}
</style>
